<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height: 200px;
            background: skyblue;
            position: absolute;
        }
        .box{
            border: 1px dashed #999999;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1"></div>

<script>
    var oDiv = document.getElementById('div1');
    var disX = 0;
    var disY =0;
    oDiv.onmousedown = function (ev) {
        var oEvent = ev || event;
        disX = oEvent.clientX - oDiv.offsetLeft;
        disY = oEvent.clientY - oDiv.offsetTop;

        var oBox = document.createElement('div');

        oBox.className = 'box';
        oBox.style.width = oDiv.offsetWidth-2+'px';
        oBox.style.height = oDiv.offsetHeight-2+'px';


        oBox.style.left = oDiv.offsetLeft+'px';
        oBox.style.top = oDiv.offsetTop+'px';

        document.body.appendChild(oBox);


        document.onmousemove = function (ev) {//拖拽的行为发生在onmousedown里面
            var oEvent = ev || event;

            var left = oEvent.clientX-disX;
            var top = oEvent.clientY-disY;

            oBox.style.left =left +'px';
            oBox.style.top = top+'px';



        };
        document.onmouseup = function () {
            document.onmousemove= null;
            document.onmouseup = null;

            oDiv.style.left = oBox.offsetLeft+'px';
            oDiv.style.top = oBox.offsetTop+'px';

            document.body.removeChild(oBox);
        };

        return false;//阻止火狐的默认事件---鼠标按下的时候会自动创建一个新的div
    };
</script>
</body>
</html>